<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/qingzhu0.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/detailInfo.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu6.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
<div th:replace="common::header"></div>
    <div class="outer10">
        <div class="inter1">
            <div class="inter11">
                <a href="index">首页</a> > <a href="">所有商品</a> > <span th:text="${product.name}"></span>
            </div>
        </div>
        <div class="inter2">
            <div class="inter21">
                <a href="">
                <img id="mainImage" th:src="@{'/image/'+${product.mainImage}}" alt="" width="450px" height="450px"></a>
                <a href="javascript:void(0)" class="small" th:onclick="'javascript:imgChange(\''+${product.images[0]}+'\')'"><img th:if="${product.images}" th:src="@{'/image/'+${product.images[0]}}" alt=""></a>
                <a href="javascript:void(0)" class="small" th:if="${product.images.size()>1}" th:onclick="'javascript:imgChange(\''+${product.images[1]}+'\')'"><img th:src="@{'/image/'+${product.images[1]}}" alt=""></a>
                <a href="javascript:void(0)" class="small" th:if="${product.images.size()>2}" th:onclick="'javascript:imgChange(\''+${product.images[2]}+'\')'"><img th:src="@{'/image/'+${product.images[2]}}" alt=""></a>
            </div>
            <div class="inter22">
                <h1 th:text="${product.name}"> 简约时尚水泥花瓶</h1>
                <p th:text="${product.content}">精选材料，设计大师设计，做工精细，摆件中的艺术品</p>
                <p style="color: #a10000" th:if="${product.productActivitys}" th:text="${product.productActivitys[0].activity}+' '+${product.productActivitys[0].remark}"></p>
                <div class="inter221">
                    <span class="s1">￥</span>
                    <span class="s2" th:text="${product.price}">450</span>
                    已售出<span class="s3" th:text="${product.sales}">0</span>件
                </div>
                <div class="inter222">
                    库存<span class="store" th:text="${product.store}">2344</span>件
                    <a href="javascript:void(0)" th:onclick="'javascript:addCart('+${product.id}+')'" class="car">加入购物车</a>
                </div>
            </div>
        </div>
    </div>
<div th:replace="common::footer"></div>

    <script th:src="@{/js/jqurey.js}"></script>
    <script th:src="@{/js/查看详情.js}"></script>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script>
    $(function () {

    })
    function getDate(data){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/product/all.do?"+data,
            //请求成功
            success : function(result) {
                // 所有产品
                allproduct=JSON.parse(result).product
                // 类别
                type=JSON.parse(result).type
                // 设置所有类别信息
                putType(type)
                // 设置分页
                page.setPage(allproduct);
                putDate(page.currentContent)
            }
        });
    }
    function putDate(result){
        var inter11=$("")

        var product=result;
        var product_list=$("#product_list")
        product_list.empty()
        $(product).each(function (index, item) {
            var li=$("<li></li>")
            var img=$("<img src="+item.image+">")
            var cont=$("<div class='cont'><h3>"+item.name+"/h3><span class='price'>￥"+item.price+"</span><br><span class=\"sell\">已售："+item.sales+"</span><span class=\"stock\">库存："+item.store+"</span></div>")
            var mask=$("<div class='mask'><a href='/product?id="+item.id+"' class='btn'>查看详情</a></div>")
            li.append(img)
            li.append(cont)
            li.append(mask)
            product_list.append(li)
        })
    }
    //数量加
    // $(".outer10 .inter2221").on("click",".add",function () {
    //     var count = parseInt($(this).child(".count")) + 1;
    //     // var count = parseInt($(this).siblings(".count").html()) + 1;
    //     console.log(count);
    //     console.log("jia");
    //     // $(this).siblings(".count").html(count);
    //     // total(this);
    // });
    // //数量减
    // $(".outer10 .inter222").on("click",".sub",function () {
    //     var count = parseInt($(this).siblings(".count").html()) - 1;
    //     $(this).siblings(".count").html(count);
    //     console.log("jian");
    // });
    $(".sub").click(function () {
        var count = parseInt($(".count").val()) - 1;
        var store=parseInt($(".store").html());
        if(count>store){
            alert("产品数量无法超过库存上限")
            return;
        }
        if(count<0){
            alert("产品数量错误")
            $(".count").val(1);
            return;
        }
        $(".count").val(count);
    })
    $(".add").click(function () {
        var count = parseInt($(".count").val()) + 1;
        var store=parseInt($(".store").html());
        if(count>store){
            alert("产品数量无法超过库存上限")
            return;
        }
        if(count<0){
            alert("产品数量错误")
            $(".count").val(1);
            return;
        }
        $(".count").val(count);
    })
    function addCart(id) {
        $.ajax({
                    url: 'addCart.do',
                    method:"get",
                    data: {productId:id},
                    success: function (data) {
                        alert(data.message)
                        //window.location.href="/mall/user/toLogin.html";
                        // {"message":"未登录！请重新登录","state":1,"data":"/mall/product/addCart.do"}
                    },
                    error:function () {
                        layer.msg("请求失败")
                    }
                });
    }
    function imgChange(img) {
        $('#mainImage').attr("src", '/mall/image/'+img);
    }
</script>
</html>